<template>
  <h1>{{ msg }}</h1>
  <el-input ref="input" v-model="count" @input="handleChange"></el-input>
  <div class="card">
    <el-button type="danger" v-auth="['test']" @click="count++">count is {{ count }}</el-button>
    <div>
      编辑
      <code>组件HelloWorld.vue</code> 测试 HMR
    </div>
  </div>
  <el-button @click="changeMsg">传送参数test</el-button>
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >创建vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    安装
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  <slot name="footer" msg="wyl"></slot>
  <el-button @click="skipPage" type="primary">跳转路由</el-button>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDebounceFn, useStorage } from '@vueuse/core'
import { useRouter } from 'vue-router'

const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
const handleChange = () => {
  denounce()
}

const denounce = useDebounceFn(() => {
  console.log(count.value)
}, 3000)
const count = useStorage('test', 20)
const emits = defineEmits(['sendMsg'])
const changeMsg = () => {
  emits('sendMsg', 'test')
}
const input = ref()
const router = useRouter()
const skipPage = () => {
  router.push('/home')
}
// const vAuth = {
//   mounted: (el, binding) => {
//     if (binding.value.includes('test')) {
//       el.remove()
//     }
//   }
// }
</script>

<style scoped>
.read-the-docs {
  color: #f00;
}
</style>
